


/* 获取元素 */
let cenInput=document.querySelectorAll('.center-input')
// console.log(cenInput);
let listp=document.querySelectorAll('.list-p')
// console.log(listp);
let cenBtn=document.querySelector('.center-btn')
// console.log(cenBtn);
let checkBox=document.querySelector('.checkbox')
// console.log(checkBox);
let inputIcon=document.querySelectorAll('#input-icon')
// console.log(inputIcon);




/*
  定义变量保存验证规则 === 正则表达式
 */
 let regArr = [
  /^[a-zA-Z]\w{5,11}$/,   //6-12: 字母开头,后面跟字母\数字\下划线
  /^1[3456789][0-9]{9}$/, //11  : 
  /^[a-zA-Z]\w{3}$/,      //4位验证码: 字母开头,后面跟字母\数字\下划线
  /^[a-zA-Z]\w{5,11}$/    //6-12: 字母开头,后面跟字母\数字\下划线
]




/*1. 失去焦点验证, 验证账号 手机验证码 手机号 密码是否正确 */


cenInput.forEach(function(dom,i){

  dom.addEventListener('click',function(){
    // console.log(11);

    //失去焦点,验证输入信息的合法性--创建验证规则(用数组保存)
    let bool = regArr[i].test(dom.value)//验证输入的信息 是否符合正则表达式


    //判断 ，为真就通过，显示验证码
    if (bool) {   //验证通过
      listp[i].style.display = 'none'
    } else {     //验证失败
      listp[i].style.display = 'block'
    }

  })


  /* 1.1输入内容时，如果input长度大于0，就显示叉叉图标 */
  dom.addEventListener('input',function(){

    if(dom.value.length>0){
      inputIcon[i].style.display='block'
    }else{
      inputIcon[i].style.display='none'

    }
  })

  /*1.2 点击叉叉图标时，清除内容并隐藏自己 */
  inputIcon[i].addEventListener('click',function(){

    dom.value=''
    this.style.display='none'
  })

})



/* 2.点击注册按钮,验证账号 手机验证码 手机号 密码,只要某一个为假，就显示当前验证 */

cenBtn.addEventListener('click',function(){

  for (let i = 0; i < cenInput.length; i++) {
    //正则.test( 输入信息 )
    let bool = regArr[i].test(cenInput[i].value)

    //判断
    if (bool) {    //验证通过
      listp[i].style.display = 'none'
      location.href='../page/home.html'

    } else {    //验证失败
      listp[i].style.display = 'block'

      return  //结束当前的函数体内的代码
    }
  }
})


 
/* 3.点击checkbox,取消禁用并改背景颜色为蓝色 */
checkBox.addEventListener('change', function () {
  //获取当前changeBtn的选中状态
  if (checkBox.checked) {//选中
    cenBtn.style.backgroundColor = 'deepskyblue'
    cenBtn.style.color='#fff'
    cenBtn.disabled = false; //取消禁用
  } else {//没有选中
    cenBtn.style.backgroundColor = '#e0e0e0'
    cenBtn.style.color='#5f5f5f'
    cenBtn.disabled = true; //禁用

  };
})





